<template>
    <div class="home">
        <div class="logOn">
            <img src="https://cdn7.axureshop.com/demo2024/2281499/images/%E7%99%BB%E5%BD%95/u54.png" alt="">
            <div class="right">
                <p><span>家庭医生管理平台</span></p>
                <span>登录入口</span>
                <div class="login">
                    <div class="picture">
                        <img src="https://cdn7.axureshop.com/demo2024/2281499/images/%E7%99%BB%E5%BD%95/u43.svg" alt="">
                    </div>
                    <input type="text" placeholder="账号:123" v-model="account">
                </div>
                <div class="login">
                    <div class="picture">
                        <img src="https://cdn7.axureshop.com/demo2024/2281499/images/%E7%99%BB%E5%BD%95/u46.svg" alt="">
                    </div>

                    <input type="text" placeholder="密码:123" v-model="passwords">
                </div>
                <div class="login">
                    <div class="picture">
                        <img src="https://cdn7.axureshop.com/demo2024/2281499/images/%E7%99%BB%E5%BD%95/u50.svg" alt="">
                    </div>
                    <input type="text" placeholder="验证码" v-model="pswd">
                    <div class="code">
                        2396
                    </div>
                </div>
                <button @click="jump">登 录</button>
            </div>
        </div>
    </div>
</template>

<script>
import router from '@/router';

export default {
    name: 'HomeView',
    router,
    data() {
        return {
            account: '',
            passwords: '',
            pswd: ''
        }
    },

    methods: {
        jump() {
            if (this.account == "123" && this.passwords == "123" && this.pswd == "2396") {
                router.replace('/about')
            } else if (this.account != "123" || this.passwords != "123") {
                alert("请输入正确的账号和密码")
                this.account = ''
                this.passwords = ''
                this.pswd = ''
            } else {
                alert("验证码错误")
                this.account = ''
                this.passwords = ''
                this.pswd = ''
            }

        },
    }
}
</script>
<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

.logOn {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
        width: 1024px;
        height: 683px;
    }

    .right {
        text-align: left;

        p {
            min-width: 288px;
            height: 48px;
            margin-bottom: 20px;

            span {
                font-size: 36px;
                color: #007fff;
            }
        }

        span {
            min-width: 96px;
            font-size: 24px;
            color: #171a1d;
        }

        .login {
            min-width: 400px;
            height: 48px;
            font-size: 14px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #ededed;
            position: relative;
            margin-top: 20px;

            input {
                width: 360px;
                height: 48px;
                text-align: left;
                border: none;
                outline: none;
            }

            .picture {
                width: 40px;
                height: 48px;
                display: flex;
                align-items: center;
                justify-content: center;

                img {
                    width: 17px;
                    height: 18px;
                }

            }

            .code {
                width: 87px;
                height: 35px;
                line-height: 35px;
                font-size: 20px;
                letter-spacing: 14px;
                color: #007fff;
                background-color: rgba(0, 127, 255, 0.117647058823529);
                position: absolute;
                right: 10px;
                bottom: 7px;
            }
        }

        button {
            min-width: 400px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background-color: #007fff;
            color: #fff;
            font-size: 18px;
            border: none;
            margin-top: 20px;
            border-radius: 4px;
        }
    }

}
</style>
